<!-- 支付页面 -->
<template>
  <div class="confirm-pay">
      <!-- <HeaderTop title="确认支付"></HeaderTop> -->
      <div class="pay-container">
        <div class="pay-total">
          <p class="total-title">订单金额</p>
          <p class="total-money">￥<span>{{orderAmountTotal}}</span></p>
        </div>
        <div class="pay-total">
          <p class="total-title">订单编号</p>
          <p class="total-title">{{orderNo}}</p>
        </div>
        <div class="pay-way">
          <van-radio-group v-model="radio">
            <van-cell-group class="cell">
              <van-cell title="选择支付方式" class="pay-way-title"/>
              <img class="icon icon-wechat" src="../../assets/img/weixin.png" alt="">
              <van-cell title="微信支付" clickable @click="radio = 2" >
                <van-radio class="chosePay" :name="2" checked-color="#4b0"/>
              </van-cell>
              <img class="icon icon-zfb" src="../../assets/img/alipay.png" alt="">
              <van-cell title="支付宝支付" clickable @click="radio = 1" >
                <van-radio class="chosePay" :name="1" checked-color="#4b0"/>
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <div class="advice-btn">
          <button class="sub" @click="toPay">确定</button>
        </div>
      </div>
  </div>
</template>

<script>
// import HeaderTop from '../HeaderTop/HeaderTop'
import {mapState} from 'vuex'
export default {
  data () {
    return {
      radio:2
      ,aaa: '111'
    }
  },

  // components: {
  //     HeaderTop
  // },

  computed: {
    ...mapState(['userInfo'])
  },

  created () {
    if(this.$route.params.orderInfoId){
      const {orderInfoId, orderNo, orderAmountTotal} = this.$route.params
      this.orderNo = orderNo // 订单编号
      this.orderInfoId = orderInfoId // 订单id
      this.orderAmountTotal = orderAmountTotal // 订单金额
    }else{
      this.orderInfoId = localStorage.getItem(orderInfoId) 
      this.orderNo = localStorage.getItem(orderNo) 
      this.orderAmountTotal = localStorage.getItem(orderAmountTotal)
    }
    
    if (!this.orderInfoId || !this.orderNo || !this.orderAmountTotal) {
      console.log(this.$route.params)
      this.$router.go(-1)
    }
  },

  methods: {
    async toPay () {
      if(this.radio === 1){ //支付宝支付
        const params = {
          userId:this.userInfo.userInfo.id,
          token:this.userInfo.token,
          orderInfoId: this.orderInfoId, // 订单id
        }
        const result = await this.API.reqAliPay(params)
        console.log(result)
        if(result.retCode === '000'){
          var form= result.retData;
          const div = document.createElement('div')
          div.innerHTML = form//此处form就是后台返回接收到的数据
          document.body.appendChild(div)
          document.forms[0].submit()
        }
      }
      if(this.radio === 2){ //微信支付
        // window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd392c1f4e54ec9e8&redirect_uri=http%3a%2f%2fwww.zxfzhejiang.com%2fzxf_html%2fwxpayfor.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
        window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd392c1f4e54ec9e8&redirect_uri=http%3a%2f%2fwww.zxfzhejiang.com%2fzxf_html%2fwxpayfor.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect")
      }
    }
  }
}

</script>

<style lang='stylus'>
.confirm-pay
  .van-cell
    padding-left 45px
    font-size 16px
    color #666666
    height 45px
    &.pay-way-title
      .van-cell__title
        margin-left -30px
    &.van-cell--clickable
      .van-cell__value
        .van-radio
          line-height normal
    .van-radio__input
      padding-right 10px
</style>

<style lang='stylus' scoped>
@import "../../common/stylus/mixins.styl"
.confirm-pay
  // margin-top 45px
  padding-bottom 0 !important
  overflow hidden
  .pay-container
    .pay-total
      width 100%
      height 45px
      display flex
      justify-content space-between
      align-items center
      color #666666
      font-size 16px
      background #fff
      margin 10px 0
      // padding 0 20px
      .total-title
        margin-left 15px
      .total-money
        margin-right 15px
        font-size 13px
        color red
        span
          font-size 20px
    .pay-way
      .cell
        position relative
        .icon
          height 22px
          width 22px
          position absolute
          z-index 1000
          &.icon-wechat
            top 57px
            left 15px
          &.icon-zfb
            top 102px
            left 15px
    .advice-btn
      margin-top 40px
      display flex 
      justify-content center
      .sub
        border 1px solid #e4e4e4
        width 305px
        border-radius 100px
        height 47px
        font-size 15px
        background #145B3E
        color #fff
</style>